<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <!-- <Form ref="formInline" :model="conditions" inline :label-width="120" :show-message="false">
        <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <Col :span="6">
                <FormItem label="名称：">
                  <Input v-model.trim="conditions.username" clearable placeholder></Input>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>
      </Form>-->
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="Publish">新增展商</Button>
      </div>
    </div>
    <Table :columns="columns1" :height="tableHeight" border :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="createTime">
        <span>{{row.createTime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="updateTime">
        <span>{{row.updateTime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="release(row,0)">
          <Icon size="18" type="ios-create-outline" />招商
        </span>
        <span class="tableBtn" @click="release(row,1)">
          <Icon size="18" type="ios-create-outline" />询盘
        </span>
        <span class="tableBtn" @click="show(row)">
          <Icon size="18" type="ios-create-outline" />编辑
        </span>
        <span class="tableBtn" @click="remove(row.id)">
          <Icon size="18" type="ios-trash" />删除
        </span>
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Modal v-model="isShow" title="展商名录新增/编辑" width="1000">
      <Form
        ref="formInline"
        :model="formInline"
        :rules="ruleInline"
        inline
        :label-width="100"
        fullscreen
      >
        <FormItem prop="name" label="公司名称">
          <Input
            type="text"
            v-model.trim="formInline.name"
            placeholder="请输入公司名称"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="phone" label="电话">
          <Input
            type="text"
            v-model.trim="formInline.phone"
            placeholder="请输入电话"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="email" label="邮箱">
          <Input
            type="text"
            v-model.trim="formInline.email"
            placeholder="请输入邮箱"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="website" label="网址">
          <Input
            type="text"
            v-model.trim="formInline.website"
            placeholder="请输入网址"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="address" label="地址">
          <Input
            type="text"
            v-model.trim="formInline.address"
            placeholder="请输入地址"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="position" label="展位">
          <Input
            type="text"
            v-model.trim="formInline.position"
            placeholder="请输入展位"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="logo" label="LOGO">
          <upload
            limit="1"
            @uploadImg="uploadImg($event,'formInline','logo',multiple=false)"
            @getImgUrl="getImgUrl($event,'formInline','logo',multiple=false)"
            :imgs="formInline.logo"
          ></upload>
        </FormItem>
        <FormItem prop="banner" label="简介图">
          <upload
            limit="1"
            @uploadImg="uploadImg($event,'formInline','banner',multiple=false)"
            @getImgUrl="getImgUrl($event,'formInline','banner',multiple=false)"
            :imgs="formInline.banner"
          ></upload>
        </FormItem>
        <FormItem prop="intro" label="公司简介">
          <Input
            type="textarea"
            v-model.trim="formInline.intro"
            :autosize="{minRows: 5,maxRows: 8}"
            placeholder="请输入简介"
          ></Input>
        </FormItem>
        <FormItem prop="product" label="主要展品图">
          <upload
            limit="100"
            @uploadImg="uploadImg($event,'formInline','product',multiple=true)"
            @getImgUrl="getImgUrl($event,'formInline','product',multiple=true)"
            :imgs="formInline.product"
            :draggabled="true"
          ></upload>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isShow=false">取消</Button>
        <Button type="primary" @click="sure('formInline')">确认</Button>
      </div>
    </Modal>
    <Modal v-model="isPush" :title="type===0?'招商':'询盘'" width="1000">
      <Form
        ref="formdata"
        :model="formdata"
        :rules="rules"
        inline
        :label-width="100"
        fullscreen
      >
        <FormItem prop="title" label="标题">
          <Input type="text" v-model.trim="formdata.title" placeholder="请输入标题" style="width：300px"></Input>
        </FormItem>
        <FormItem prop="name" label="联系人姓名">
          <Input
            type="text"
            v-model.trim="formdata.name"
            placeholder="请输入联系人姓名"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="phone" label="联系人电话">
          <Input
            type="text"
            v-model.trim="formdata.phone"
            placeholder="请输入联系人电话"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="intro" label="项目简介">
          <Input
            type="textarea"
            v-model.trim="formdata.intro"
            :autosize="{minRows: 5,maxRows: 8}"
            placeholder="请输入项目简介"
          ></Input>
        </FormItem>
        <FormItem prop="pic" label="项目图片">
          <upload
            limit="100"
            @uploadImg="uploadImg($event,'formdata','pic',multiple=true)"
            @getImgUrl="getImgUrl($event,'formdata','pic',multiple=true)"
            :imgs="formdata.pic"
            :draggabled="true"
          ></upload>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isShow=false">取消</Button>
        <Button type="primary" @click="submit('formdata')">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  directoryList,
  addDirectory,
  modifyDirectory,
  delDirectory,
  addMerchant
} from "../../api/directory";
import { _ValidatenullPhone } from "@/assets/js/validate.js";
import upload from "@/components/upload.vue";
export default {
  components: {
    upload
  },
  data() {
    const _ValidateImage = (rule,value,callback)=>{
      if(value==''){
        return callback(new Error("请上传项目图片"))
      }else{
        callback();
      }
    }
            
    return {
      limit: 100, //允许上传的数量
      type: "", //1招展 2询盘
      list: [],
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      conditions: {},
      columns1: [
        {
          title: "id",
          key: "id",
          align: "center",
          minWidth: 60
        },
        {
          title: "公司名称",
          key: "name",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "所属展位",
          key: "position",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "电话",
          key: "phone",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "邮箱",
          key: "email",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "网址",
          key: "website",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "公司地址",
          key: "address",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          minWidth: 280,
          fixed:'right',
        }
      ],
      tableHeight: 100,
      isShow: false,
      isPush: false,
      isFixed: false,
      username: "",
      id: "", //id
      formInline: {
        name: "",
        phone: "",
        email: "",
        website: "",
        address: "",
        position: "",
        logo: "",
        banner: "",
        intro: "",
        product: ""
      },
      formdata: {
        name: "",
        phone: "",
        title: "",
        intro: "",
        pic: []
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        intro: [
          {
            required: true,
            message: "请输入项目简介",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            validator: _ValidatenullPhone,
            trigger: "blur"
          }
        ],
        pic: [
          {
            required: true,
            validator: _ValidateImage,
            trigger: "change"
          }
        ]
      },
      ruleInline: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            validator: _ValidatenullPhone,
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        image: [
          {
            required: true,
            message: "请上传LOGO",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getdirectoryList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    // 上传文件
    uploadImg(imgs,name, k, multiple) {
      console.log(imgs,name, k, multiple)
      if (multiple) {
        this[name][k] = JSON.parse(imgs);
      } else {
        this[name][k] = JSON.parse(imgs)[0];
      }
      console.log(this[name][k])
    },
    getImgUrl(imgs,name, k, multiple) {
      if (multiple) {
        this[name][k] = imgs;
      } else {
        this[name][k] = imgs[0];
      }
    },
    checkStatus(e, name) {
      this.formInline[name] = e;
    },
    changeStatus(e, name) {
      this.page = 1;
      this.conditions[name] = e;
      this.getdirectoryList();
    },
    gettypeList() {
      //分类列表
      typeList().then(res => {
        if (res.status) {
          this.typeLists = res.data.map(e => {
            return {
              value: e.id,
              label: e.name
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getdirectoryList() {
      this.loading = true;
      const { page, pageSize } = this;
      directoryList({ page: page - 1, pageSize }).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    release(row, type) {
       this.formdata = {
        name: "",
        phone: "",
        title: "",
        intro: "",
        pic: []
      };
      this.type = type;
      this.id = row.id;
      this.isPush = true;
    },
    show(row) {
      this.id = row.id;
      this.formInline = {
        name: row.name,
        phone: row.phone,
        email: row.email,
        website: row.website,
        address: row.address,
        position: row.position,
        logo: row.logo,
        banner: row.banner,
        intro: row.intro,
        product: JSON.parse(row.product)
      };
      this.isShow = true;
    },
    changePage(e) {
      this.page = e;
      this.getdirectoryList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getdirectoryList();
    },
    Publish() {
      this.id = "";
      this.formInline = {
        name: "",
        phone: "",
        email: "",
        website: "",
        address: "",
        position: "",
        logo: "",
        banner: "",
        intro: "",
        product: ""
      };
      this.isShow = true;
    },
    //新增招展询商
    submit(nam) {
      const { name, phone, pic, intro, title } = this.formdata;
      this.$refs[nam].validate(valid => {
        if (valid) {
          addMerchant({
            name,
            phone,
            pic:JSON.stringify(pic),
            intro,
            title,
            type: this.type,
            directoryId: this.id
          }).then(res => {
            console.log(res);
            if (res.status) {
              this.isPush = false;
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        } else {
        }
      });
    },
    //新增修改招展询商
    sure(nam) {
      const {
        name,
        phone,
        email,
        website,
        address,
        position,
        logo,
        banner,
        intro,
        product
      } = this.formInline;
      this.$refs[nam].validate(valid => {
        if (valid) {
          if (this.id == "") {
            addDirectory({
              name,
              phone,
              email,
              website,
              address,
              position,
              logo,
              banner,
              intro,
              product: JSON.stringify(product)
            }).then(res => {
              console.log(res);
              if (res.status) {
                this.isShow = false;
                this.getdirectoryList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            console.log(111)
            modifyDirectory({
              id: this.id,
              name,
              phone,
              email,
              website,
              address,
              position,
              logo,
              banner,
              intro,
              product: JSON.stringify(product)
            }).then(res => {
              if (res.status) {
                this.isShow = false;
                this.getdirectoryList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        } else {
        }
      });
    },
    //删除展商
    remove(id) {
      this.$Modal.confirm({
        title: "警告",
        content: `删除后无法恢复，确定要删除？`,
        onOk: () => {
          delDirectory({ id }).then(res => {
            if (res.status) {
              this.getdirectoryList();
              this.$Message.success("删除成功");
            } else {
              this.$Message.error(res.msg);
            }
          });
        },
        onCancel: () => {}
      });
    },
    cancel() {
      this.isShow = false;
    },
    editorChange(e) {},
    search() {
      this.getdirectoryList();
    },
    handleReset() {
      this.conditions = {
        typeId: ""
      };
      this.page = 1;
      this.getdirectoryList();
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>

